<template>
	<view class="chart-card">
		<u-row justify="space-between">
			{{ cardData.title }}
			<u-icon color="#fff" name="question-circle" @click="skipDescribe(cardData.title)"></u-icon>
		</u-row>
		<charts class="chart-block" :option="cardData.option" :id="cardData.id" :height="141"></charts>
		<view class="score-block">
			<u-row>
				<u-col align="center" :span="4" :key="i.title" v-for="i in cardData.info">
					<u-row>
						<u-image width="10px" height="10px" :src="i.icon"></u-image>
						{{ i.title }}
					</u-row>
					<u-row class="sub-title">{{ i.subTitle }}<span>{{ i.unit }}</span></u-row>
				</u-col>
			</u-row>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				count: 5,
			};
		},
		props: ["chartData"],
		components: {},
		computed: {
			cardData() {
				return (
					this.chartData || {
						title: "平均周睡眠分数",
						status: "良好",
						value: 4,
						date: "2025-02-12至2025-02-1",
					}
				);
			},
		},
		methods: {
			skipDescribe(e) {
				uni.navigateTo({
					url: "/pages/PublicPage/PublicPage?pageConfig=" +
						JSON.stringify({
							page: "Describe",
							name: e + "说明",
						}),
				});
			},
		},
	};
</script>
<style lang="scss">
	.chart-card {
		background-color: #1b1b1b;
		padding: 16px;
		border-radius: 12px;
		margin-bottom: 12px;

		.chart-block {
			background-color: #0b0f12;
			border-radius: 6px;
			margin: 12px 0px;
		}

		.score-block {
			background-color: #0b0f12;
			border-radius: 6px;
			padding: 12px 0px;
			font-size: 12px;
			color: #999999;

			::v-deep .u-image {
				margin-right: 3px;
			}

			.sub-title {
				font-size: 18px;
				color: #ffffff;
				margin-top: 6px;

				span {
					font-size: 8px;
					margin-left: 3px;
					margin-top: 3px;
				}
			}
		}
	}
</style>